<template>
  <div class="personal">
    <nav class="menu-wrap">
      <div id="headPic">
        <!-- <img id="headPicimg" src="../assets/images/icon_shangjie.gif" alt /> -->
        <div id="headPicimg" @click='changeHeadPic()'>
          <img
            id="innerImg"
            :src="headpic"
            alt='更换头像'
            title="更换头像"
          />
        </div>
        <!-- <form action="#">
          <input type="file" accept="image/jpg" onchange="changeHeadPic()" style="display:none"/>
        </form> -->
      </div>
      <div class="menu">
        <ul>
          <li>
            <router-link to="/index/home">
              <i class="fa fa-home fa-lg"></i>
              <span class="nav-text">首页</span>
            </router-link>
          </li>
          <li>
            <router-link to="/personal/edit">
              <i class="fa fa-bullhorn fa-lg"></i>
              <span class="nav-text">编辑资料</span>
            </router-link>
          </li>
          <li>
            <router-link to="/personal/upmenu">
              <i class="fa fa-user fa-lg"></i>
              <span class="nav-text">上传菜谱</span>
            </router-link>
          </li>
          <li>
            <router-link to="/personal/published">
              <i class="fa fa-envelope-o fa-lg"></i>
              <span class="nav-text">已发布的内容</span>
            </router-link>
          </li>
          <li>
            <router-link to="/personal/collect">
              <i class="fa fa-heart-o fa-lg"></i>
              <span class="nav-text">收藏</span>
            </router-link>
          </li>
          <li>
            <router-link to="/personal/exchange">
              <i class="fa fa-shopping-bag fa-lg"></i>
              <span class="nav-text">积分兑换</span>
            </router-link>
          </li>
        </ul>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return{
      headpic:'',
      imgurl: "",
    }
  },
  created(){
    this.$axios
      .get("http://localhost:3000/users/personal")
      .then(res => {
        // console.log(res.data.data[0])
        console.log(res.data.data[0].headPic)
        // console.log(res.data.data[0]);
        this.imgurl = res.data.data[0].headPic;
        this.headpic = require("../../../../Eatproj/EAT/public/upload/" +
          this.imgurl);
        this.userintro = res.data.data[0].intro;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods: {
    goHome() {
      this.$router.push("/index/home");
    },
    changeHeadPic(){
      this.$router.push({
        name:'UpdHeadPic'
      });
    }
  }
};
</script>
<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}
.menu-wrap {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55px;
  background-color: #f5f5f5;
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.menu-wrap:hover {
  width: 250px;
}

.menu {
  position: absolute;
  left: 0;
  top: 80px;
  bottom: 80px;
  width: 250px;
  overflow-y: auto;
  margin-top: 80px;
}

.menu li {
  height: 42px;
  line-height: 42px;
}

.menu li:hover {
  background-color: rgb(160, 190, 117);
}

.menu li:hover a {
  color: #fff;
}

.menu a {
  display: block;
  columns: #8a8a8a;
  border-top: 1px solid #e9e9e9;
}

.menu i {
  display: inline-block;
  width: 55px;
  text-align: center;
  font-size: 18px;
}

.menu span {
  font-size: 14px;
}

/* 侧边头像 */
#headPic {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 75px;
  margin-left: 80px;
  /* margin:20px auto; */
  position: relative;
  overflow: hidden;
  top: 50px;
}

#headPicimg {
  width: 80px;
  height: 80px;
}
#innerImg{
  width: 80px;
  height: 80px;
}
#headPic:hover #mask {
  display: block;
}
</style>
